<template>
	<view>
		<view style="display: flex;flex-direction: column;align-items: center;">
			<view style="width: 90%;font-size: 36upx;font-weight: 600;letter-spacing: 2upx;margin-top: 20upx;">
			{{blog.title}}
			</view>
			<view style="display: flex;
						flex-direction: row;
						width: 90%;
						height: 100upx;
						line-height: 100upx;
						">
				<view style="color: #2B81AF;margin-right: 20upx">
					<text class="cuIcon-send"></text>
					{{blog.milestone.title}}
				</view>
				<view>
					<text class="cuIcon-time"></text>
					{{blog.createTime}}
					</view>
			</view>
			<view style="width: 90%;">
				<view v-for="(label,index) in blog.labels" :key="index" class="cu-tag light sm round" style="color: white;" :style="{ backgroundColor:'#'+label.color }">{{label.name}}</view>				
			</view>
			<view style="width: 90%;text-align: justify">
				  <u-parse :content="html" @preview="preview" @navigate="navigate" />
			</view>
		</view>


	</view>
</template>

<script>
	import { queryPost } from '../../utils/service.js'
	import { formatBlog } from "../../utils/format"
	import marked from 'marked'
	import UParse from '../../components/u-parse/u-parse.vue'

	export default {
		components:{
			UParse
		},
		async onLoad(option) {
			let id = option.id
			this.blog = await queryPost(id);
			this.blog = formatBlog(this.blog)
			this.html = marked(this.blog.body)
			console.log(this.html)

		},
		data() {
			return {
				blog:{},
				html:''
			};
		},
		methods:{
			preview(src, e) {
				console.log(src)
			  // do something
			},
			navigate(href, e) {
			  // do something
			  	console.log(href)
			}
		}
	}
</script>

<style lang="less">
@import url("../../components/u-parse/u-parse.css");
</style>
